<script lang="ts">
import {Vue, Component, Prop, Watch} from 'vue-property-decorator';
import renderPDFToImages from '../utils/pdftoImg.js'
@Component({name: "ImgPreview"})
export default class ImgPreview extends Vue {
  @Prop({type: String, required:true,default: ()=>{return ""}})url = "";
  isPdf:boolean = false;

  urlList:string[] = [];

  @Watch("url", {deep: true})
   async urlChanged(url:string){
    if(url && url.indexOf('pdf')!== -1){
      this.isPdf = true
    }
    const lis:string[] = url.split(";")
    // // 转换pdf
    const pdfLis = lis.filter((item:any) => {return item.indexOf('pdf')!==-1});
    const imgLis = lis.filter((item:any) => {return item.indexOf('pdf')==-1});
    let pdfRenderLis:string[] = []
    for(let i=0;i<pdfLis.length;i++){
      await renderPDFToImages(pdfLis[i], pdfRenderLis);
    }
    pdfRenderLis.forEach(i => {
      imgLis.push(i)
    })
    this.urlList = imgLis
  }
}
</script>

<template>
  <div style="height:100%;width: 65%">
    <viewer
        :options="{
        navbar: false, // 禁用导航栏
        toolbar: true, // 禁用工具栏
        button: false,
        inline: true, // 将 Viewer 容器嵌入到页面中
        fullscreen: false,
        title: false
    }"
    >
      <img v-for="src in urlList" :key="src" :src="src" style="display: none">
    </viewer>
  </div>
</template>

<style scoped lang="scss">

</style>